<template>
	<d-box ref="rePop" :title="wtit">
		<div class="pop_content">
			<div class="airJK">
				<div class="jk_l isDev">
					<!-- <img src="/imgs/zjbg.png" width='200' alt="" /> -->
				</div>

				<div class="br">
				</div>
				<div class="jk_r">
					<div class="" v-for="jk in jkMenu">
						<span>
							{{jk.name}}
						</span>
						<el-dropdown class="dropd" @command="t=>handleCommand(jk,t)">
							<span class="el-dropdown-link">
								<span class="spname">{{jk.act}}</span>
								<span class="el-icon--right" v-show="jk.child">▼</span>
							</span>
							<template #dropdown>
								<el-dropdown-menu>
									<el-dropdown-item v-for="s in jk.child" :command="s">{{s}}</el-dropdown-item>
								</el-dropdown-menu>
							</template>
						</el-dropdown>
					</div>
				</div>
			</div>
		</div>
	</d-box>
</template>

<script setup>
	import {
		onMounted, //页面初始化
		onUnmounted, //页面卸载
		nextTick,
		computed,
		reactive,
		watch, //监控
		ref, //
		toRefs
	} from "vue";

	import dBox from "cmpt/drag-box.vue";

	//事件抛出
	//外层绑定@onFn="hOnFn"
	const emit = defineEmits(['onFn', 'onUnSave']);
	//触发
	const hOnFn = (t) => {
		emit('onFn', t);
	}

	function jkM(n, c, act) {
		return {
			name: n,
			child: c,
			act: act || "",
		}
	}

	const wtit = ref(""),
		jkMenu = ref([]),
		rePop = ref();

	//设备集控 或 单个设备 的 参数
	const handleCommand = (par, i) => {
		par.act = i;

	};

	const show = (n, r) => {
		rePop.value.show();
		wtit.value = n;
		jkMenu.value = [
			jkM("运行状态", null, r.ktyxms),
			jkM("设置温度", null, r.szwd),
			//jkM("运行模式", ["制热", "制冷", "自动"]),
			jkM("当前风速", null, r.fs),
			jkM("环境温度", null, r.airtemp)
		];
		rePop.value.closeWait();
	}
	watch(rePop, w => {
		w.hid();
	});
	//属性导出
	//使用方法 ref="rdom" rdom.value.hFn()
	defineExpose({
		show
	});


	//属性定义
	//数据绑定v-bind:dat="dat"  
	//const dat=ref({});
	const props = defineProps({
		dat: {
			type: Object
		},
	});



	onMounted(() => nextTick(() => {

	}));
	onUnmounted(() => {

	})
</script>

<style scoped lang="scss">
	.airJK {
		display: flex;
		margin-right: 30px;

		color: #A7B4C6;

		.br {
			height: auto;
			width: 2px;
			background: linear-gradient(0deg, transparent, #58b5e3 50%, transparent);
			margin: 0 14px;
		}

		.jk_l.isDev {
			display: flex;
			align-items: center;
		}

		.jk_l {

			>div {
				display: flex;
				justify-content: space-between;
			}

			.dlst {
				display: flex;
				flex-direction: column;
				flex-wrap: nowrap;
				align-items: flex-start;
				max-height: 200px;
				overflow-y: auto;

				>div {
					margin: 4px 0;
					width: 100%;
					cursor: pointer;

				}
			}

			.ck {
				display: flex;
				flex-direction: row;
				justify-content: flex-start;
				align-items: center;
			}

			.ck:hover {
				box-shadow: 0 0 2px 0 #3397c2;
			}

			.ck.act::before {
				content: '✔';
			}

			.ck::before {
				content: '';
				color: #3397c2;
				font-size: 14px;
				text-align: center;
				display: inline-block;
				line-height: 14px;
				width: 14px;
				height: 14px;
				margin: 0 6px 0 3px;
				padding: 0;
				box-shadow: 0 0 3px 3px #3397c2, inset 0 0 3px 0px #3397c2;
				border-radius: 1px;
			}
		}

		.jk_r {
			margin-left: 20px;

			>div {
				margin: 14px 0;
			}

			>div>* {
				line-height: 20px;
			}
		}

		.dropd {
			box-shadow: 0 0 3px 3px #3397c2, inset 0 0 4px 1px #3397c2;
			border-radius: 2px;
			padding: 0px 8px;
			font-size: 12px;
			margin-left: 10px;

			.el-dropdown-link {
				color: #A7B4C6;
				width: 70px;
				display: flex;
				justify-content: space-between;
			}
		}

		.dropd::after {
			position: absolute;
			content: "";
			display: inline-block;
			width: 18px;
			height: 18px;
			background: url(/imgs/hos/set.png);
			background-size: 100% 100%;
			right: -25px;
			margin-top: 1px;
		}
	}
</style>

<style module>
	/**
	 * 类名会被打乱
	 *绑定方法   :class="[$style.fullscreen]"
	 *申明 .fullscreen 
   */
</style>